<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <script type="javascript" src="js/jquery-1.11.3.js"></script>
    <script type="javascript" src="js/bootstrap.js"></script>
    <title>注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a:hover{text-decoration: none;color: #ffffff;}
        #bg {
            position: fixed;
            width: 100%;
            height: 100%;
        }
        .box {
            width: 100%;
            height: 100%;
        }
        .box>div {
            background: rgba(0,0,0,.5);
            position: absolute;
            width: 40%;
            height: 45%;
            top: 50%;
            left: 50%;
            margin-left: -20%;
            margin-top: -15%;
        }
        .left {
            width: 80%;
            /*border-right: 1px solid #CCCCCC;*/
            height: 100%;
           margin: 0 auto;

        }
        .left>h4 {
            color: #FFFFFF;
            line-height: 2em;
        }
        .left>form>div>label {
            color: #FFFFFF;
            font-size: 1.1em;
        }
        .left>form>div>input {
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            width: 100%;
        }
        .left>form>div {
            padding-top: 5%;
            margin-left: 10%;
            margin-right: 10%;
        }
        .form-horizontal .form-group {
            margin-right: 0;
        }
        span > a:hover{color: #d58512;}
        /**/
        .form-control{width:85%;}
        .btn_big1{padding: 1em;color: #ffffff;background: #d58512;border: 0;border-radius: 6px;}
        .red{color:red;font-size: 1em;}
    </style>
</head>
<body>
<img src="images/0.webp" alt=""id="bg"/>
<div class="box">
    <div>
        <div class="left">
            <h4 class="text-center">欢迎注册</h4>
            <form class="form-horizontal" id="register" method="post" id="mobileForm" >
                <div class="form-group">
                    <label for="username" class="col-sm-3 control-label">用户名</label>
                    <div class="col-sm-9" style="position: relative">
                        <input type="text" name="username" class="form-control" id="username" placeholder="请输入邮箱或者电话" onBlur="user(this.value);" />
                        <span id="mobile_phone_notice" style="position: absolute; right: 55%;top: 40px;"></span>
                    </div>
                </div>
                <div class="form-group" style="position: relative;">
                    <label for="password1" class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-9" >
                        <input type="password" name="password1" class="form-control" id="password1" placeholder="密码不能少于6位" onBlur="pass1(this.value);">
                        <span id="password_notice"  style="position: absolute; right: 55%;top: 40px;"></span>
                    </div>
                </div>
                <div class="form-group" style="position: relative;">
                    <label for="password2" class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-9">
                        <input type="password" name="password2" class="form-control" id="password2" placeholder="请再次输入上面的密码" onBlur="pass2(this.value);"/>
                        <span id="confirm_password_notice" style="position: absolute; right: 55%;top: 40px;"></span>
   <p><div style="text-align: right;color:#ffffff;">已有账号，<a href="登录.html" style="color:#d58512; ">立即登录</a></div></p>
                    </div>
                </div>
                <div class="form-group">
                 
                    <div class="" style="width: 75%;margin: 0 auto;">
                        <input type="submit" value="注册" class="btn_big1 btn-block"  onclick="check_submit()"/>
                    

                        <input type="hidden" name="referurl" id="referurl" value="{$referurl}">
                    </div>
                </div>
            </form>
        </div>
       
<script type="text/javascript">
    setCurrentForm(document.getElementById('register'));
    var flag = false;

    function setCurrentForm(formObj) {
        currentForm = document.getElementById('register');
    }

    function user(username){
        if(username == ''){
            mobile_phone_notice.innerHTML= '用户名不能为空';
            mobile_phone_notice.style.color="red";
            return false;
            flag = false;
        }
        if(username.indexOf(" ") != -1){
            mobile_phone_notice.innerHTML= '密码不能包含空格';
            mobile_phone_notice.style.color="red";
            return false;
            flag = false;
        }
        if (!checkMobile(username) && !checkEmail(username)) {
            mobile_phone_notice.innerHTML= "账号格式不匹配!";
            mobile_phone_notice.style.color="red";
            return false;
            flag = false;
        }
        else{
            mobile_phone_notice.innerHTML= "可以注册";
            mobile_phone_notice.style.color="green";
            flag = true;
        }
    }

    function pass1(passward1){
        if(passward1 == ''){
            password_notice.innerHTML="密码不能为空";
            password_notice.style.color="red";
            return false;
            flag = false;
        }
        if(passward1.indexOf(" ") != -1){
            password_notice.innerHTML= '密码不能包含空格';
            password_notice.style.color="red";
            return false;flag = false;
        }
        if(passward1.length<6){
            password_notice.innerHTML=  '密码不能小于6位';
            password_notice.style.color="red";
            return false;flag = false;
        }else{
            password_notice.innerHTML=  '可以注册';
            password_notice.style.color="green";
            flag = true;
        }
    }
    function pass2(passward2){
        var pass1=document.getElementById('password1').value;
        if(passward2 == ''){
            confirm_password_notice.innerHTML="密码不能为空";
            confirm_password_notice.style.color="red";
            return false;flag = false;
        }
        if(passward2.indexOf(" ") != -1){
            confirm_password_notice.innerHTML= '密码不能包含空格';
            confirm_password_notice.style.color="red";
            return false;flag = false;
        }
        if(passward2.length<6){
            confirm_password_notice.innerHTML=  '密码不能小于6位';
            confirm_password_notice.style.color="red";
            return false;flag = false;
        }if(passward2!==pass1){
            confirm_password_notice.innerHTML=  '两次密码不一致';
            confirm_password_notice.style.color="red";
            return false;flag = false;
        }
        else{
            confirm_password_notice.innerHTML=  '输入正确';
            confirm_password_notice.style.color="green";
            flag = true;
        }
    }
    function checkMobile(tel) {
        var reg = /(^1[3|4|5|7|8][0-9]{9}$)/;
        if (reg.test(tel)) {
            return true;
        }else{
            return false;
        };
    }
    function checkEmail(str){
        var reg = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if(reg.test(str)){
            return true;
        }else{
            return false;
        }
    }
    function showErrorMsg(msg){
        //$('.msg-err').show();
        //$('.J-errorMsg').html(msg);
        layer.open({content:msg,time:2});
    }

    function check_submit()
    {
        var form=document.forms[0];
        var username = form.username.value;
        var password1 = form.password1.value;
        var password2= form.password2.value;
        if(username.length >0 && password1.length > 0 && password2.length > 0 && (flag=true))
        {
            alert("注册成功");
            return true;
            form.submit();   
            
        }else{
            return false;
        }

    }  
    
</script>

</body>
</html>